<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <!-- BEGIN 全局样式 -->
    <link rel="stylesheet" href="../../../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="../../../css/reset-diy.css" type="text/css">
    <link rel="stylesheet" href="../../../lib/jedate/skin/jedate-blue.css">
    <title>考勤时间设置</title>
    <style>
        .container {
            min-height: 90vh;
        }

        body {
            padding-bottom: 135px;
        }

        .btn-submit {
            width: 100%
        }

        #form-lesson .glyphicon-remove {
            width: 30px;
            height: 34px;
            line-height: 34px;
            margin-left: -12px;
            padding-left: 8px;
            font-size: 16px;
            cursor: pointer;
        }

        #form-lesson .glyphicon-remove:hover {
            color: red;
            font-size:17px;
        }
    </style>
</head>
<body>

<div class="container bk-gray">
    <ul class="nav nav-tabs mt-15">
        <li><a href="#semester" data-toggle="tab">设置本学期工作日</a></li>
        <li><a href="#allDay" data-toggle="tab">全日考勤时间</a></li>
        <li class="active"><a href="#lesson" data-toggle="tab">课时设置</a></li>
    </ul>
    <div class="tab-content mt-20">
        <div class="tab-pane" id="semester">设置本学期工作日</div>
        <div class="tab-pane" id="allDay">全日考勤时间</div>
        <div class="tab-pane active" id="lesson">
            <form id="form-lesson" class="form-horizontal">
                <!--早晨-->
                <div class="mt-50">
                    <h3 class="text-center mb-15">早晨(早读)</h3>
                    <div class="form-group">
                        <label class="control-label col-sm-3">开始时间</label>
                        <div class="col-sm-6">
                            <input type="text" id="morningStart"
                                   class="form-control col-sm-6" readonly
                                   name="EARLY_STUDY_HALL_START"
                                   placeholder="早读开始时间">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">结束时间</label>
                        <div class="col-sm-6">
                            <input type="text" id="morningEnd"
                                   class="form-control" readonly
                                   name="EARLY_STUDY_HALL_END"
                                   placeholder="早读结束时间">
                        </div>
                    </div>
                </div>
                <!--上午-->
                <div class="mt-50">
                    <h3 class="text-center mb-15">上午</h3>
                    <div id="forenoon" class="vessel"></div>
                    <!--<div class="form-group">-->
                    <!--<label class="control-label col-sm-3">第一节课</label>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="forenoon-1-start" class="form-control" readonly placeholder="开始时间"-->
                    <!--name="CLASS_HOUR_1_START">-->
                    <!--</div>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="forenoon-1-end" class="form-control" readonly placeholder="结束时间"-->
                    <!--name="CLASS_HOUR_1_END">-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="form-group">-->
                    <!--<label class="control-label col-sm-3">第二节课</label>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="forenoon-2-start" class="form-control" placeholder="开始时间"-->
                    <!--name="CLASS_HOUR_2_START">-->
                    <!--</div>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="forenoon-2-end" class="form-control" placeholder="结束时间"-->
                    <!--name="CLASS_HOUR_2_END">-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="form-group">-->
                    <!--<label class="control-label col-sm-3">第三节课</label>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="forenoon-3-start" class="form-control" placeholder="开始时间"-->
                    <!--name="CLASS_HOUR_3_START">-->
                    <!--</div>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="forenoon-3-end" class="form-control" placeholder="结束时间"-->
                    <!--name="CLASS_HOUR_3_END">-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="form-group">-->
                    <!--<label class="control-label col-sm-3">第四节课</label>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="forenoon-4-start" class="form-control" placeholder="开始时间"-->
                    <!--name="CLASS_HOUR_4_START">-->
                    <!--</div>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="forenoon-4-end" class="form-control" placeholder="结束时间"-->
                    <!--name="CLASS_HOUR_4_END">-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="form-group">-->
                    <!--<label class="control-label col-sm-3">第五节课</label>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="forenoon-5-start" class="form-control" placeholder="开始时间"-->
                    <!--name="CLASS_HOUR_5_START">-->
                    <!--</div>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="forenoon-5-end" class="form-control" placeholder="结束时间"-->
                    <!--name="CLASS_HOUR_5_END">-->
                    <!--</div>-->
                    <!--</div>-->
                </div>
                <!--下午-->
                <div class="mt-50">
                    <h3 class="text-center mb-15">下午</h3>
                    <div id="afternoon" class="vessel"></div>
                    <!--<div class="form-group">-->
                    <!--<label class="control-label col-sm-3">第一节课</label>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="afternoon-1-start" class="form-control" placeholder="第一节课开始时间"-->
                    <!--name="CLASS_HOUR_6_START">-->
                    <!--</div>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="afternoon-1-end" class="form-control" placeholder="第一节课结束时间">-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="form-group">-->
                    <!--<label class="control-label col-sm-3">第二节课</label>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="afternoon-2-start" class="form-control" placeholder="开始时间"-->
                    <!--name="CLASS_HOUR_7_START">-->
                    <!--</div>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="afternoon-2-end" class="form-control" placeholder="结束时间">-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="form-group">-->
                    <!--<label class="control-label col-sm-3">第三节课</label>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="afternoon-3-start" class="form-control" placeholder="开始时间"-->
                    <!--name="CLASS_HOUR_8_START">-->
                    <!--</div>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="afternoon-3-end" class="form-control" placeholder="结束时间">-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="form-group">-->
                    <!--<label class="control-label col-sm-3">第四节课</label>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="afternoon-4-start" class="form-control" placeholder="开始时间"-->
                    <!--name="CLASS_HOUR_9_START">-->
                    <!--</div>-->
                    <!--<div class="col-sm-3">-->
                    <!--<input type="text" id="afternoon-4-end" class="form-control" placeholder="结束时间">-->
                    <!--</div>-->
                    <!--</div>-->
                </div>
                <!--晚自习-->
                <div class="mt-50">
                    <h3 class="text-center mb-15">晚自习</h3>
                    <div class="form-group">
                        <label class="control-label col-sm-3">开始时间</label>
                        <div class="col-sm-6">
                            <input type="text" id="nightStart" class="form-control col-sm-6" readonly placeholder="开始时间"
                                   name="NIGHT_STUDY_HALL_START">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">结束时间</label>
                        <div class="col-sm-6">
                            <input type="text" id="nightEnd" class="form-control" readonly placeholder="结束时间"
                                   name="NIGHT_STUDY_HALL_END">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3"></label>
                        <div class="col-sm-6">
                            <a href="javascript:void(0)"
                               class="btn btn-primary block btn-submit lesson-submit mt-20">保存</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!--核心脚本sss-->
<script src="../../../lib/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]>
<script src="../../../js/excanvas.min.js"></script>
<script src="../../../js/respond.min.js"></script>
<![endif]-->
<!--加密插件sss 必须放在jquery.myPlugIn_v1.0.js前面-->
<script src="../../../js/common/jsrsasign-all-min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/crypto-js.min.js" type="text/javascript" charset="utf-8"></script>
<!--加密插件eee-->

<!--<script src="../../../js/bootstrap.min.js" type="text/javascript"></script>-->
<!--<script src="../../../js/jquery.cookie.min.js" type="text/javascript"></script>-->
<script src="../../../lib/layer/2.4/layer.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="../../../lib/laypage/1.2/laypage.js" type="text/javascript" charset="utf-8"></script>-->
<script src="../../../lib/jedate/dist/jedate.min.js"></script>
<script src="../../../js/work-box.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/jquery.myPlugIn_v1.0.js" type="text/javascript" charset="utf-8"></script>


<!--<script src="../../../js/common/localstorage-ie.js" type="text/javascript" charset="utf-8"></script>-->
<!--<script src="../../../js/jquery.slimscroll.min.js" type="text/javascript"></script>-->
<!--<script src="../../../js/jquery.blockui.min.js" type="text/javascript"></script>-->
<!--<script src="../../../js/jquery.uniform.min.js" type="text/javascript"></script>-->
<script>
    var T = new Extend_base();
    jQuery(document).ready(function () {
        function Attendance() {
            this.debug = true;
            this.clickEvent();

            this.getLesson();

            this.submitSemester();
            this.submitAllDay();
            this.submitLesson();
        }

        Attendance.prototype = {

            dateInit: function () {
                var _this = this;
                var forenoon = $("#forenoon"), afternoon = $("#afternoon");
                forenoon.html("");
                afternoon.html("");
                var button = $(
                    '<div class="form-group">' +
                    '<label class="control-label col-sm-6"></label>' +
                    '<div class="col-sm-3 text-right"><a href="javascript:void(0)" class="btn btn-primary btn-add"><span class="glyphicon glyphicon-plus"></span> 新增课程</a></div>' +
                    '</div>');

                for (var i = 1; i < 6; i++) {
                    var group = $(
                        '<div class="form-group">' +
                        '<label class="labels control-label col-sm-3">第 ' + i + ' 节课</label>' +
                        '<div class="col-sm-3">' +
                        '<input type="text" id="lesson-' + i + '-start" class="bindDate form-control" readonly placeholder="开始时间" name="CLASS_HOUR_' + i + '_START">' +
                        '</div>' +
                        '<div class="col-sm-3">' +
                        '<input type="text" id="lesson-' + i + '-end" class="bindDate form-control" readonly placeholder="结束时间" name="CLASS_HOUR_' + i + '_END">' +
                        '</div>' +
                        // '</div><span title="删除课时" class="glyphicon glyphicon-remove"></span>' +
                        '</div>');

                    if (i == 4) {
                        forenoon.append(button);
                    }

                    if (i < 4) {
                        forenoon.append(group);
                    } else {
                        afternoon.append(group);
                    }
                }
                afternoon.append(button.clone(true));

                // 早读
                jeDate("#morningStart", {
                    minDate: '2018-07-12 00:00:00',
                    maxDate: '2050-06-16 23:59:59',
                    format: "hh:mm:ss",
                });
                jeDate("#morningEnd", {
                    format: "hh:mm:ss",
                });

                // 晚自习
                jeDate("#nightStart", {
                    format: "hh:mm:ss",
                });
                jeDate("#nightEnd", {
                    format: "hh:mm:ss",
                });

                // 上午和下午
                _this.bindDate();
            },
            clickEvent: function () {
                var _this = this;
                $("#form-lesson").on("click", ".btn-add", function () {
                    var i = 8;
                    var group = $(
                        '<div class="form-group">' +
                        '<label class="labels control-label col-sm-3">第 ' + i + ' 节课</label>' +
                        '<div class="col-sm-3">' +
                        '<input type="text" id="lesson-' + i + '-start" class="bindDate form-control" readonly placeholder="开始时间" name="CLASS_HOUR_' + i + '_START">' +
                        '</div>' +
                        '<div class="col-sm-3">' +
                        '<input type="text" id="lesson-' + i + '-end" class="bindDate form-control" readonly placeholder="结束时间" name="CLASS_HOUR_' + i + '_END">' +
                        '</div><span title="删除课时" class="glyphicon glyphicon-remove"></span>' +
                        '</div>');
                    var vessel = $(this).parents(".vessel");
                    vessel.append(group);
                    vessel.append($(this).parents(".form-group"));
                    _this.countLessonNum(); // 计算label 和 name 等一些数字
                    _this.bindDate(); // 绑定日期插件
                });
                $("#form-lesson").on("click",".glyphicon-remove",function (){
                    $(this).parents(".form-group").remove();
                });
            },
            submitSemester: function () {

            },
            submitAllDay: function () {

            },

            getLesson: function () {
                var _this = this;
                if (this.debug) {
                    this.dateInit();
                } else {
                    T.ajaxSecret(url_join("setting/attendance"), "post", {}, function (res) {
                        console.log(res);
                        // if (this.debug) {
                        //     // 调用填充数据方法
                        // } else {
                        // 创建并填充数据
                        _this.renderLesson(res.data);
                        // }
                    });
                }

            },
            renderLesson: function (res) {
                var _this = this, data = res.class_hour;
                var lesson = T.toArrayObject(data);

                var forenoon = $("#forenoon"), afternoon = $("#afternoon");
                forenoon.html("");
                afternoon.html("");

                for (var i = 0, len = lesson.length / 2; i < len; i++) {
                    var group = $(
                        '<div class="form-group">' +
                        '<label class="labels control-label col-sm-3">第 ' + (i + 1) + ' 节课</label>' +
                        '<div class="col-sm-3">' +
                        '<input type="text" id="lesson-' + (i + 1) + '-start" class="bindDate form-control" readonly placeholder="开始时间" name="CLASS_HOUR_' + (i + 1) + '_START" value="' + data["CLASS_HOUR_" + (i + 1) + "_START"] + '">' +
                        '</div>' +
                        '<div class="col-sm-3">' +
                        '<input type="text" id="lesson-' + (i + 1) + '-end" class="bindDate form-control" readonly placeholder="结束时间" name="CLASS_HOUR_' + (i + 1) + '_END" value="' + data["CLASS_HOUR_" + (i + 1) + "_END"] + '">' +
                        '</div>' +
                        '</div>');

                    if (i < res.MORNING_TOTAL_CLASS_HOUR) {
                        forenoon.append(group);
                    } else {
                        afternoon.append(group);
                    }
                }

                // ============= 早和晚 数据填充=========
                $("#morningStart").val(res.EARLY_STUDY_HALL_START);
                $("#morningEnd").val(res.EARLY_STUDY_HALL_END);
                $("#nightStart").val(res.NIGHT_STUDY_HALL_START);
                $("#nightEnd").val(res.NIGHT_STUDY_HALL_END);

                // ============== 日历 =================
                // 早读
                jeDate("#morningStart", {
                    minDate: '2018-07-12 00:00:00',
                    maxDate: '2050-06-16 23:59:59',
                    format: "hh:mm:ss",
                });
                jeDate("#morningEnd", {
                    format: "hh:mm:ss",
                });

                // 晚自习
                jeDate("#nightStart", {
                    format: "hh:mm:ss",
                });
                jeDate("#nightEnd", {
                    format: "hh:mm:ss",
                });

                // 上午和下午
                _this.bindDate();
            },
            countLessonNum: function () {
                var input = $(".vessel input");
                var num = 1;
                input.each(function (i, v) {

                    // id
                    var id = $(this).attr("id");
                    id = id.replace(/-\d-/, "-" + num + "-");
                    $(this).attr("id", id);

                    // name
                    var name = $(this).attr("name");
                    name = name.replace(/_\w_/, "_" + num + "_");
                    $(this).attr("name", name);

                    if (i % 2) {
                        num++;
                    } else {
                        // name = name.replace(/_\w_/, "_" + num + "_");
                        // label 数字设置
                        var label = $(this).parents(".form-group").children("label");
                        var text = label.text().replace(/\d+/, " " + num + " ");
                        label.text(text);
                    }

                });
            },
            bindDate: function () {
                $(".bindDate").each(function () {
                    var id = $(this).attr("id");

                    jeDate("#" + id, {
                        minDate: '2018-07-12 00:00:00',
                        maxDate: '2550-06-16 23:59:59',
                        format: "hh:mm:ss",
                    });
                });
            },
            submitLesson: function () {
                var _this = this;
                $(".lesson-submit").on("click", function () {
                    var forenoon = $("#forenoon input");
                    var afternoon = $("#afternoon input");

                    var data = {
                        setting: $("#form-lesson").serializeObject()
                    };

                    data.setting.MORNING_TOTAL_CLASS_HOUR = _this.countInputNum(forenoon);
                    data.setting.AFTERNOON_TOTAL_CLASS_HOUR = _this.countInputNum(afternoon);
                    data.setting.TOTAL_CLASS_HOUR = _this.countInputNum(forenoon) + _this.countInputNum(afternoon);

                    // 后端数据安照顺序走
                    // data.setting.MORNING_TOTAL_CLASS_HOUR = forenoon.length / 2;
                    // data.setting.AFTERNOON_TOTAL_CLASS_HOUR = afternoon.length / 2;
                    // data.setting.TOTAL_CLASS_HOUR = (forenoon.length + afternoon.length) / 2;

                    console.log(data);

                    T.ajaxSecret(url_join("setting/update"), "post", data, function (e) {
                        layer.msg("操作成功", {icon: 1});
                    });
                });
            },
            countInputNum: function (forenoon) {
                var num = 0, _this = this;
                $.each(forenoon, function () {
                    if ($(this).val() != "") {
                        num++
                    } else {
                        // 删除空元素, 重新计算name
                        $(this).remove();
                        _this.countLessonNum();
                    }
                });
                return num / 2; // 每排2个input
            },
            constructor: "Attendance",
        };

        new Attendance();
    });
</script>
</body>
</html>